<style>
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    *:before, *:after {
        box-sizing: border-box;
    }

    ul,
    li {
        list-style: none;
    }

    .l_tree_container {
        width: 100%;
        height: 100%;
        box-shadow: 0 0 3px #ccc;
        margin: 13px;
        position: relative;
    }

    .l_tree {
        width: calc(100% - 44px);
        height: 100%;
        padding-left: 42px;
    }

    .l_tree_branch {
        width: 100%;
        height: 100%;
        display: block;
        padding: 13px;
        position: relative;
    }

    .l_tree_branch .l_tree_children_btn {
        width: 19px;
        height: 19px;
        background-color: #23b1f0;
        font-size: 14px;
        text-align: center;
        color: #ffffff;
        outline: none;
        border: 0;
        cursor: pointer;
    }

    ul.l_tree:before {
        content: '';
        border-left: 1px dashed #999999;
        height: calc(100%);
        position: absolute;
        left: 10px;
        top: 0px;
    }

    .l_tree .l_tree_branch:last-child::before {
        content: '';
        width: 3px;
        height: calc(100% - 24px);
        display: block;
        background-color: #ffffff;
        position: absolute;
        bottom: 0;
        left: -34px;
    }

    .l_tree,
    .l_tree_branch {
        position: relative;
    }

    .l_tree_branch::after {
        content: '';
        width: 40px;
        height: 0;
        border-bottom: 1px dashed #000;
        position: absolute;
        right: calc(100% - 9px);
        top: 22px;
    }

    .l_tree_container > .l_tree::before,
    .l_tree_container > .l_tree > .l_tree_branch::after {
        display: none;
    }
</style>

<form action="{:url()}" method="post" class="form_single">

    <div class="box">
        <div class="layui-row">
            <input type="text" name="id" style="padding: 10px"  placeholder="手机号|用户名" autocomplete="off"  value="{:input('mobile')}" class="layui-input-inline">
            <button class="layui-btn"  id="search"  url="{:url('member_level')}"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
        </div>
        <div class="box-body">
            <div class="row">
                <div id="demo">
                    <div class="l_tree_container">
                        <ew-tree :model="testdata"></ew-tree>
                    </div>
                </div>
            </div>
        </div>
        <div class="box-footer">


        </div>
    </div>
</form>

<script type="text/javascript">
    var arr = [
        static_root + 'module/admin/js/vue.js',
    ];
    ob.loadMultiScripts(arr).done(function () {


        $.post("{:url('member/member_level')}", {id: "{$id}"}, function (d) {

            // 树组件
            Vue.component('ew-tree', {
                template: `
                    <ul class="l_tree">
                        <li class="l_tree_branch" v-for="item in model" :key="item.id">
                            <div class="l_tree_click">
                                <button type="button" class="l_tree_children_btn" v-if="item.children"  @click="toggle(item)">{{ !item.show ? '+' : '-' }}</button>
                                <span class="l_folder">{{ item.name }}</span>
                            </div>
                            <ew-tree v-show="item.show"   v-if="item.children" :model="item.children"></ew-tree>
                        </li>
                    </ul>`,
                props: {
                    model: {}
                },
                methods: {
                    toggle: function (item) {
                        var idx = this.model.indexOf(item)
                        Vue.set(this.model[idx], 'show', !item.show);
                    }
                },
                //初始化
                mounted(){
                    Vue.set(d,'show',false);

                }

            });
            var d=JSON.parse(d);
            console.log(d);
            new Vue({
                el: "#demo",
                data() {
                    return {
                        testdata: [

                            d


                        ]
                    }
                }
            })


        })

    }).fail(function(){

        alert('Vue加载失败...');
    })

</script>
